<template>
  <div class="min-h-screen bg-white">
    <!-- 顶部导航  -->
    <header class="bg-primary text-white py-4 px-6 text-center text-xl font-bold shadow-md">
      用户登录
    </header>

    <!-- 登录表单 -->
    <div class="container mx-auto px-4 pt-8">
      <div class="max-w-md mx-auto space-y-6">
        <div class="flex items-center border-b border-gray-300 pb-2">
          <span class="text-gray-500 w-24 sm:w-28 font-medium">手机号码：</span>
          <input 
            v-model="phone"
            type="tel" 
            placeholder="请输入手机号码" 
            class="flex-1 outline-none text-gray-800 text-base sm:text-lg border-0"
          >
        </div>
        
        <div class="flex items-center border-b border-gray-300 pb-2">
          <span class="text-gray-500 w-24 sm:w-28 font-medium">密码：</span>
          <input 
            v-model="password"
            type="password" 
            placeholder="请输入密码" 
            class="flex-1 outline-none text-gray-800 text-base sm:text-lg border-0"
          >
        </div>
        
        <button 
          type="button" 
          @click="handleLogin"
          class="w-full bg-green-500 text-white border-0 py-3 rounded-lg font-bold text-lg shadow-lg hover:bg-green-600 transition-colors duration-300"
        >
          登录
        </button>
        
        <button 
          type="button" 
          @click="goToRegister" 
          class="w-full bg-green-500 border-0 text-white py-3 rounded-lg font-bold text-lg shadow-lg hover:bg-green-600 transition-colors duration-300"
        >
          去注册
        </button>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { User } from '@/hooks/userData.ts';
import { loginStatus } from '../stores/loginStatus';

const phone = ref('');
const password = ref('');
const router = useRouter();

const handleLogin = () => {
  if (!phone.value || !password.value) {
    alert('请输入手机号码和密码');
    return;
  }

  // 模拟登录跳转
  if (phone.value === User.phone && password.value === User.password) {
    console.log('登录成功');
    loginStatus.isLoggedIn = true; // 更新登录状态
    router.push('/profile');
  } else {
    alert('手机号码或密码错误');
  }
};

const goToRegister = () => {
  router.push('/register');
};

</script>

<style scoped>
.bg-primary {
  background-color: #0097FF;
}
</style>